import 'package:flutter/material.dart';
import '../../../../widget/PPButtonView.dart';
import '../model/PPShopHomePageModel.dart';

class PPHorizontalScrollTabView extends StatefulWidget {

    PPHorizontalScrollTabView(List<PPShopPlateContent> data, {Key key, this.initialIndex = 0, this.changeSelectTab}): this.data = data, super(key: key);

    final List data;
    final int initialIndex;
    final Function changeSelectTab;

    _PPHorizontalScrollTabViewState createState() => _PPHorizontalScrollTabViewState();

}

class _PPHorizontalScrollTabViewState extends State<PPHorizontalScrollTabView> {

    List<PPShopPlateContent> data;
    int selectIndex;

    @override
    void initState() {
        data = widget.data;
        selectIndex = widget.initialIndex < widget.data.length ?  widget.initialIndex : 0;
        super.initState();
    }

    @override
    void didUpdateWidget(PPHorizontalScrollTabView oldWidget) {
        data = widget.data;
        super.didUpdateWidget(oldWidget);
    }

    @override 
    Widget build(BuildContext context) {
        return (Container(
            color: Colors.transparent,
            child: SingleChildScrollView(
                padding: EdgeInsets.all(0),
                controller: new ScrollController(),
                scrollDirection: Axis.horizontal,
                primary: false,
                child: Row(
                    children:_getScrollViewItems(),
                )
            )
        ));
    }

    _getScrollViewItems() {
        return data.map((item){
            int index = data.indexOf(item);
            return _getTabItem(item, index);
        }).toList();
    }

    Widget _getTabItem(PPShopPlateContent item, int index) {
        bool isSelect = index == selectIndex;
        return (PPButtonView(
            btnChild: Container(
                padding: EdgeInsets.fromLTRB(21, 18, 21, 0),
                child: Container(
                    padding: EdgeInsets.only(bottom: 8),
                    alignment: Alignment.center,
                    decoration: BoxDecoration( border:  Border(bottom: BorderSide(width: 3, color: _getBorderColor(isSelect), style: BorderStyle.solid))),
                    child: Text(item.contentDesc, style: TextStyle(fontSize: 17, color: _getTitleColor(isSelect))),
                ),
            ),
            onPressedAction: (){ _onPressSelectItem(item, index); },
        ));
    }

    _getBorderColor(bool isSelect) {
        if(isSelect) {
            return Color.fromRGBO(70, 140, 255, 1);
        } else {
            return Colors.transparent;
        }
    }

    _getTitleColor(bool isSelect) {
        if(isSelect) {
            return Color.fromRGBO(70, 140, 255, 1);
        } else {
            return Color.fromRGBO(51, 51, 51, 1);
        }
    }

    _onPressSelectItem(PPShopPlateContent item, int index) {
        if(widget.changeSelectTab != null) {
            setState(() {
                selectIndex = index;
            });
            widget.changeSelectTab(item, index);
        }
    }

}